<template>
  <div class="office_index">
    <div class="flex main">
      <div class="flex-1 left">
        <div class="m-auto model_wrap">
          <img class="block w-100" src="../../assets/images/nine-header.jpg">
          <template v-for="(item, index) in sectionList">
            <div :key="index" class="section_wrap" :class="{ 'active': index + 1 == activeNum }" @click="activeNum = index + 1">
              <img class="block w-100" :src="require('../../assets/images/nine' + item.imgName)" :alt="item.title">
            </div>
          </template>
        </div>
      </div>
      <div class="right">
        <h5 class="color-666 normal-font header">{{ sectionList[activeNum - 1].title }}</h5>
        <div class="main_form">
          <comp-form ref="compForm" :goods-num="sectionList[activeNum - 1].num" :level-name="sectionList[activeNum - 1].key" />
        </div>
        <div class="text-center footer">
          <el-button style="width:200px" size="small" type="primary" @click="save">保存</el-button>
        </div>
      </div>
    </div>
    <div class="fix-footer-btns">
      <!-- <el-button
        size="small"
        @click="preview"
      >预览</el-button> -->
      <el-button size="small" type="primary" @click="submit">发布</el-button>
    </div>
  </div>
</template>

<script>
import { getActivityPage, editActivityPage, release } from '../../api/xcx'
import compForm from './components/compForm'
export default {
  components: { compForm },
  data() {
    return {
      activeNum: 1,
      pageId: '',
      configData: {},
      pageType: '办公设备'
    }
  },
  computed: {
    sectionList() {
      switch (this.pageType) {
        case '办公设备':
          return [
            {
              title: '商品（1+3）推荐位',
              key: 'first_level',
              imgName: '1.jpg',
              num: 4
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '电脑平板':
          return [
            {
              title: '商品（3）推荐位',
              key: 'first_level',
              imgName: '5.jpg',
              num: 3
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '7.jpg',
              num: 6
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '健康理疗':
          return [
            {
              title: '商品（3）推荐位',
              key: 'first_level',
              imgName: '4.jpg',
              num: 3
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '品牌手机':
          return [
            {
              title: '商品（1+4）推荐位',
              key: 'first_level',
              imgName: '6.jpg',
              num: 5
            },
            {
              title: '商品（1+4）推荐位',
              key: 'second_level',
              imgName: '6.jpg',
              num: 5
            }
          ]
        case '能源设备':
          return [
            {
              title: '商品（3）推荐位',
              key: 'first_level',
              imgName: '4.jpg',
              num: 3
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '开店赋能':
          return [
            {
              title: '商品（1+3）推荐位',
              key: 'first_level',
              imgName: '1.jpg',
              num: 4
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '数码摄影':
          return [
            {
              title: '商品（3）推荐位',
              key: 'first_level',
              imgName: '5.jpg',
              num: 3
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '7.jpg',
              num: 6
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '游戏设备':
          return [
            {
              title: '商品（3）推荐位',
              key: 'first_level',
              imgName: '4.jpg',
              num: 3
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '智能家居':
          return [
            {
              title: '商品（1+3）推荐位',
              key: 'first_level',
              imgName: '1.jpg',
              num: 4
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '花呗专区':
          return [
            {
              title: '商品（3）推荐位',
              key: 'first_level',
              imgName: '4.jpg',
              num: 3
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '热租爆品':
          return [
            {
              title: '商品（3）推荐位',
              key: 'first_level',
              imgName: '4.jpg',
              num: 3
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '短租精选':
          return [
            {
              title: '商品（3）推荐位',
              key: 'first_level',
              imgName: '4.jpg',
              num: 3
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        case '租完即送':
          return [
            {
              title: '商品（1+3）推荐位',
              key: 'first_level',
              imgName: '1.jpg',
              num: 4
            },
            {
              title: '商品（3+4）推荐位',
              key: 'second_level',
              imgName: '2.jpg',
              num: 7
            },
            {
              title: '商品（9）推荐位',
              key: 'third_level',
              imgName: '3.jpg',
              num: 9
            }
          ]
        default:
          return []
      }
    }
  },
  watch: {
    activeNum(val) {
      if (val) {
        this.setData(val)
      }
    }
  },
  mounted() {
    this.pageType = this.$route.meta.title
    this.getData()
  },
  methods: {
    submit() {
      release(this.pageId).then(res => { })
    },
    setData(pos) {
      const key = this.sectionList[pos - 1].key
      const data = {
        main_title: this.configData[key].main_title || '',
        goods: this.configData[key].goods || []
      }
      this.$nextTick(() => {
        this.$refs.compForm.formData = data
      })
    },
    getData() {
      getActivityPage().then(res => {
        const result = res.find(item => item.title === this.pageType)
        if (result) {
          this.pageId = result.id
          this.configData = result.details ? JSON.parse(result.details)
            : {
              first_level: {
                goods: [],
                main_title: ''
              },
              second_level: {
                goods: [],
                main_title: ''
              },
              third_level: {
                goods: [],
                main_title: ''
              }
            }
          this.setData(this.activeNum)
        }
      })
    },
    save() {
      const params = this.$refs.compForm.save()
      if (params) {
        editActivityPage({
          id: this.pageId,
          ...params
        }).then(res => {
          this.getData()
        })
      }
    },
    preview() {
    },
    release() {
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.activeNum = 1
    this.pageType = to.$route.meta.title
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.office_index {
  padding: 0;

  .main {
    height: 73vh;
  }

  .left {
    padding: 30px;
    background-color: #f5f5f5;
    overflow: auto;
  }

  .model_wrap {
    width: 375px;

    &>div.active {
      border: 1px solid $mainBlue;
    }
  }

  .right {
    width: 420px;
    overflow-y: auto;

    .header {
      padding: 15px;
      border-bottom: 1px solid #eeeeee;
    }

    .footer {
      padding: 15px 0;
      border-top: 1px solid #eeeeee;
    }
  }

  .main_form {
    padding: 15px 20px;
  }
}
</style>
